<template>

    <h3>14.模板引用</h3>
    <!-- 使用ref来直接获取DOM -->
    <div ref="container" class="container">{{ content }}</div>
    <button @click="getElement">获取元素</button>

</template>
<script>
/**
 * 对于Vue模板常用方法
 * 内容改变: {{ 模板语法 }}
 * 属性改变: v-bind:指令
 * 事件:@或v-on:事件
 * 
 * 但对于一些特殊情况，可能需要直接操作DOM
 * 如果没有必要需求，不要操作DOM
 */
    export default {
        data(){
            return{
                content:"内容"
            }
        },
        methods:{
            getElement(){
                //
                console.log(this.$refs.container)
                this.$refs.container.innerHTML = "hhh"
            }
        }

    }

</script>